<template>
  <view class="complaint-content">
    <u--form ref="uForm" :label-style="{
        fontSize:'27rpx',
        color: '#333',
      }" :model="formData" :rules="rules" error-type="toast" labelPosition="top">
      <u-form-item border-bottom label="选择反馈原因" prop="type">
        <!-- <u--input v-model="typeTitle" border="none" disabled disabled-color="#ffffff" placeholder="请选择原因" />
        <u-icon slot="right" name="arrow-right" /> -->
        <u-radio-group v-model="formData.type" size="38" placement="column" activeColor="rgb(9, 187, 7)"
                       @change="groupChange">
          <u-radio :customStyle="{marginBottom: '18px'}" v-for="(item, index) in list" :key="index"
                   :label="item.name" :name="item.label" :iconSize="30" :labelSize="32" labelColor="#000">
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item border-bottom label="选择反馈原因" prop="detail">
        <u--input v-model="formData.detail" disabled-color="#ffffff" placeholder="选择反馈原因" />
      </u-form-item>
      <u-form-item border-bottom label="输入手机号" prop="contactWay">
        <u--input v-model="formData.contactWay" disabled-color="#ffffff" placeholder="请输入手机号" />
      </u-form-item>
    </u--form>
    <u-action-sheet :actions="list" :show="showType" title="请选择原因" @close="showType = false" @select="typeSelect" />
    <view style="margin-top: 35rpx;">
      <view style="margin: 40rpx;">
        <u-button type="primary" shape="circle" @click="onSubmit">提交</u-button>
      </view>
    </view>
  </view>
</template>
<script>
import {Dict} from '@/utils/filter'
import {Api} from '@/service/api'
import {mapActions} from 'vuex'

export default {
  data() {
    return {
      showType: false,
      list: [],
      typeTitle: '',
      formData: {
        type: undefined,
        detail: '',
        contactWay: ''
      },
      rules: {
        'type': [{
          required: true,
          message: '请选择反馈类型'
        }],
        'detail': [{
          required: true,
          message: '请填写具体原因'
        }],
        'contactWay': [{
          required: true,
          message: '请填写手机号',
          parent: /^1[3456789]\d{9}$/,
          trigger: ['change', 'blur'],
        }, {
          // 自定义验证函数，见上说明
          validator: (rule, value, callback) => {
            // 上面有说，返回true表示校验通过，返回false表示不通过
            // uni.$u.test.mobile()就是返回true或者false的
            return uni.$u.test.mobile(value);
          },
          message: '手机号码不正确',
          // 触发器可以同时用blur和change
          trigger: ['change', 'blur'],
        }],
        options: {}
      }
    }
  },
  onLoad(e) {
    console.log('页面加载')
    this.options = e
  },
  onShow() {
    this.list = Dict.getDict('complaint_type').map(item => {
      return {
        ...item,
        name: item.value
      }
    })
    console.log(this.list, 'list');
  },
  onPullDownRefresh() {
    console.log('上拉刷新...')
    uni.stopPullDownRefresh()
  },
  methods: {
    typeSelect(data) {
      this.formData.type = data.label
      this.typeTitle = data.name
    },
    /**
     * 提取vux的userInfo
     */
    ...mapActions('userInfo', ['getInfoMethod']),

    /**
     * 提交反馈意见
     */
    groupChange(e) {
      console.log(e);
    },
    async onSubmit() {
      this.formData.nickName = (await this.getInfoMethod())['nickName']
      this.$refs.uForm.validate().then(async (res) => {
        console.log('校验通过')
        let regex = /^1[3456789]\d{9}$/
        if (!regex.test(this.formData.contactWay)) {
          uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none'
          })
          return
        }
        this.formData.tvId = this.options.tvId
        this.formData.tvName = this.options.tvName
        const {
          data
        } = await Api.addComplaint(this.formData)
        if (data) {
          uni.showToast({
            title: "操作成功"
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        }

      }).catch(errors => {
        console.log('校验未通过', errors)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.radio {
  display: block;
  margin-top: 20rpx;
}

.complaint-tip {
  font-size: 24rpx;
  color: #999;
  text-align: center;
}

.complaint-content {
  padding: 20rpx 40rpx 0;
  box-sizing: border-box;

  ::v-deep .u-form-item__body{
    flex-direction: column !important;

    .u-form-item__body__left{
      width: 400rpx !important;
      margin-bottom: 30rpx !important;
    }
  }
}

.uni-title {
  margin-bottom: 15rpx;
  font-size: 27rpx
}

.uni-padding-wrap {
  margin: 30rpx;
}
</style>
